<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选择器的权重</title>
		<!-- 选择器的权重越高，选中几率越大 -->
	<style>
		*{
			/* 权重最小 0 很容易被覆盖 */
			color: #cbc9ff !important;
			background: white;
		}
		div{
			/* 权重为1  */
			color: #ffffff;
		}
		.d1{
			/* 权重 10 */
			color: antiquewhite;
		}
		div.d1{
			/* 权重之和 11 */
			color: aqua;
			background: #cbc9ff;
		}
		body.div.d1{
			/* 权重 12 */
		}
		#d1{
			/* 权重 100 */
			font-size: 15px;
			color: bisque;
		}
		div#d1{
			/* 权重 101 */
			color: #cbc9ff;
		}
		div#d1:hover{
			/* 权重 111 */
			color: black;
		}
	</style>
	</head>
	<body>
		<div class="d1" id="d1" style="color: red;">lorem</div>
		<p>oooo我是隔壁的泰山</p>
	</body>
</html>